import 'package:flutter/material.dart';

/* 
BottomNavigationBar
是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是Scaffold组件的参数。

items                     底部导航条按钮集合
currentIndex              默认选中第几个
onTap                     选中变化回调函数
fixedColor                选中的颜色
type                      BottomNavigationBarType.fixed (Tab3个以上) 、BottomNavigationBarType.shifting

*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(home: Tabs()));
}

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义导航'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
        ],
        currentIndex: _currentIndex,
        onTap: (val) {
          setState(() {
            _currentIndex = val;
          });
        },
        fixedColor:Colors.blueAccent
      ),
    );
  }
}
